<template>
    <div class="page">
        <div class="page_header" style="display: flex;">
            <div style="flex: 1 1 auto">
                <el-form ref="searchForm" :model="searchForm" style="display: flex;">
                    <el-form-item prop="shop_name">
                        <el-input v-model="searchForm.shop_name" placeholder="商户名称"></el-input>
                    </el-form-item>
                    <el-form-item prop="contact_phone">
                        <el-input v-model="searchForm.contact_phone" placeholder="商户电话"></el-input>
                    </el-form-item>
                    <el-form-item prop="channel_id">
                        <el-select v-model="searchForm.channel_id" multiple placeholder="达人等级">
                            <el-option
                                    v-for="item in channels"
                                    :key="item.value"
                                    :label="item.text"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="status">
                        <el-select v-model="searchForm.status" multiple placeholder="订单状态">
                            <el-option
                                    v-for="item in status"
                                    :key="item.value"
                                    :label="item.text"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div style="flex:0 0 auto;">
                <el-button @click="$store.dispatch('tableReload')" type="primary">查询</el-button>
                <el-button @click="$store.dispatch('tableReset')">重置</el-button>
            </div>
        </div>
        <el-card class="page_body">
            <el-table
                    height="10"
                    class="page_body_table"
                    :data="common.tableData"
                    v-loading="common.loading"
                    border
                    stripe
                    style="width: 100%">
                <el-table-column prop="eo_id" width="80" label="编号"></el-table-column>
                <el-table-column prop="shop_name" label="商户名称">
                    <template slot-scope="scope">
                        <el-button type="text" @click="$refs.exploreDetail.init(scope.row.eo_id)">{{scope.row.shop_name}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="status_name" width="80" label="工单状态"></el-table-column>
                <el-table-column prop="contact_phone" width="120" label="商户电话"></el-table-column>
                <el-table-column prop="created_at" width="150" label="发单时间"></el-table-column>
                <el-table-column prop="start_date" width="100" label="探店起期"></el-table-column>
                <el-table-column prop="end_date" width="100" label="探店止期"></el-table-column>
                <el-table-column prop="channel_name" width="80" label="等级"></el-table-column>
                <el-table-column prop="short_name" label="商户区域"></el-table-column>
                <el-table-column prop="address" label="商户地址"></el-table-column>
<!--                <el-table-column prop="total_num" width="60" label="总单量"></el-table-column>-->
<!--                <el-table-column prop="remaining_num" width="60" label="剩余"></el-table-column>-->
<!--                <el-table-column prop="distribution_num" width="60" label="已抢单"></el-table-column>-->
<!--                <el-table-column prop="pending_num" width="60" label="进行中"></el-table-column>-->
<!--                <el-table-column prop="success_num" width="60" label="完成数"></el-table-column>-->
<!--                <el-table-column prop="failed_num" width="60" label="取消数"></el-table-column>-->
            </el-table>
            <pagination class="page_body_pagination"></pagination>
        </el-card>
        <explore-detail-dialog ref="exploreDetail" @refresh="$store.dispatch('tableReload')"></explore-detail-dialog>
    </div>
</template>

<script>
    import {mapState} from 'vuex';
    import Pagination from "../Pagination";
    import ExploreDetailDialog from "./Dialog/ExploreDetailDialog";
    export default {
        name: "Explore",
        computed:{
            ...mapState(['common','laifei']),
        },
        components:{
            Pagination,
            ExploreDetailDialog,
        },
        data(){
            return{
                method:'post',
                url:'/api/laifei/explore/store',
                searchForm:{
                    shop_name:'',
                    channel_id:[],
                    status:[],
                    contact_phone:'',
                },
                channels:[],
                status:[],
            }
        },
        created() {
            this.$store.dispatch('pageInit', this);
            // 加载推广新媒体类型
            this.post('/api/common/enums', {type: 'explore_channel'}).then(result => {
                if (result.code === 0) {
                    this.channels = result.data;
                }
            });
            this.post('/api/common/enums', {type: 'explore_order_status'}).then(result => {
                if (result.code === 0) {
                    this.status = result.data;
                }
            });
        },
    }
</script>

<style scoped>

</style>
